<template>
  <div class="bc-footer" v-if="!getIsPhone">
    <div class="bc-footer-inner">
      <div class="bottom-logo-wrapper">
        <div class="bottom-logo">
          <router-link to="/home" class="img-wrapper">
            <img src="@/assets/imgs/bottom_logo.png" alt="">
          </router-link>
        </div>
      </div>  
      <div class="footer-nav">
        <div class="nav-item hover-style" v-for="item in list" :key="item.id">
          <span class="icon"><i class="iconfont" :class="item.icon"></i></span>
          <span class="context">{{item.context}}</span>
        </div>
      </div>
      <div class="recommend-browser">
        <span class="context">
          推荐浏览器：
        </span>
        <div class="browser-icon hover-style">
          <img :src="getImgUrl(img.img)" alt="" :title="img.alt" v-for="img in browserImg" :key="img.id">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          icon: 'iconindex_db_zhanghuxiangguan',
          context: '账户相关'
        },
        {
          id: 3,
          icon: 'iconindex_db_chongzhigoucai',
          context: '充值采购'
        },
        {
          id: 2,
          icon: 'iconindex_db_duihuantixian',
          context: '兑换提款'
        },
        {
          id: 4,
          icon: 'iconindex_db_zaixiankefu',
          context: '在线客服'
        }
      ],
      browserImg: [
        {
          id: 1,
          // imgUrl: '@assets/imgs/Browser_Google.png'
          img: 'Browser_Google',
          alt: 'Google'
        },
        {
          id: 2,
          // imgUrl: '@/assets/imgs/Browser_Firefox.png'
          img: 'Browser_Firefox',
          alt: 'Firefox'
        },
        {
          id: 3,
          // imgUrl: '@/assets/imgs/Browser_360.png'
          img: 'Browser_360',
          alt: '360'
        },
        {
          id: 4,
          // imgUrl: '@/assets/imgs/Browser_QQ.png'
          img: 'Browser_QQ',
          alt: 'QQ'
        }
      ]
    }
  },
  methods: {
    getImgUrl(img) {
      return require("@/assets/imgs/"+img+".png")
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  .bc-footer
    background #252A2E
    width 100% 
    position absolute 
    left 0 
    right 0
    bottom 0
    .bc-footer-inner
      position relative
      width 1200px
      height 72px
      margin 0 auto
      .bottom-logo-wrapper
        // position absolute 
        // left -24px 
        // bottom 0
        // width 308px 
        // height 70px
        // background #181A1C 
        .bottom-logo
          position absolute
          left 0
          bottom 0
          width 260px
          height 96px
          background rgba(37,42,46,1)
          box-sizing border-box 
          padding 27px 46px
          z-index 99
          .img-wrapper 
            .img 
              width 100%
      .footer-nav
        display flex
        margin-left 260px
        margin-right 248px
        height 72px
        align-items center
        justify-content space-around
        .context
          font-weight:bold;
          color rgba(204,165,102,1)
          line-height 30px
          font-weight bold
        .icon
          width 32px
          height 32px
          border 1px solid rgba(204,165,102,0.3)
          background: rgba(#252A2E, 0.3)
          display inline-block
          margin-right 10px
          border-radius 50%
          vertical-align middle
          .iconfont 
            font-size 32px
            box-sizing border-box 
            background-image: -webkit-linear-gradient(0deg,rgba(250,217,177,1),rgba(254,250,224,1));
            -webkit-background-clip text
            -webkit-text-fill-color transparent
      .recommend-browser
        position absolute 
        top 0
        right 0
        bottom 0
        width 248px
        height 42px
        background rgba(0,0,0, 0.23)
        display flex
        align-items center
        border-radius:21px 
        margin-top 15px
        .browser-icon
          display flex 
          align-items center
          img 
            width 24px
            height 24px
            margin-right 10px
        .context
          color:rgba(140,143,152,1)
          margin-left 15px
          font-weight 300
</style>